<template>
    <el-button type="success" @click="dialogVisible=true">新增+</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="90" />
    <el-table-column prop="menuName" label="菜单名称" width="100" />
    <el-table-column prop="url" label="菜单Url" width="120" />
    <el-table-column prop="pName" label="父级菜单名称" width="110" />
    <el-table-column prop="createBy" label="创建人" width="90" />
    <el-table-column prop="createTime" label="创建时间" width="180" >
         <template v-slot="scope">
       <span>{{ scope.row.createTime==null?"":moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateBy" label="修改人" width="90" />
    <el-table-column prop="updateTime" label="修改时间" width="180" >
         <template v-slot="scope">
         <span>{{ scope.row.updateTime==null?"":moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button  type="danger" size="small" @click="handleClick(scope.row.id,scope.row.menuName)">
          删除
        </el-button>
        <el-button  type="warning" size="small" @click="Update(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--添加菜单---->
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="500"
  >
   <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="父级菜单" prop="name">
      <div class="m-4">
    <el-cascader v-model="ruleForm.pId"  :options="options" :props="props1" clearable />
  </div>
    </el-form-item>

     <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="ruleForm.menuName" />
    </el-form-item>

     <el-form-item label="跳转的Url地址" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

<!--修改菜单-->
  <el-dialog
    v-model="UpdatedialogVisible"
    title="修改"
    width="500"
  >
   <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="父级菜单" prop="name">
      <div class="m-4">
    <el-cascader v-model="ruleForm.pId"  :options="options" :props="props1" clearable />
  </div>
    </el-form-item>

     <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="ruleForm.menuName" />
    </el-form-item>

     <el-form-item label="跳转的Url地址" prop="url">
      <el-input v-model="ruleForm.url" />
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="Edit(ruleFormRef)">
        修改
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import http from '../lanjieqi/lan1'
import axios from '../lanjieqi/lan'
import { onMounted, ref } from 'vue'
import moment from 'moment'
import { reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ElMessageBox } from 'element-plus'

//显示
const tableData =ref([])
const seach=()=>
{
    axios.get("api/Menu/GetMenuShow").then(res=>
    {
        tableData.value=res.data.data
    })
}
//生命周期函数
onMounted(()=>
{
    seach()
})
//弹出框显示
const dialogVisible = ref(false)
const UpdatedialogVisible = ref(false)
//表单数据
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  pId: '',
  menuName: '',
  url: '',
id:''
})
//非空判断
const rules = reactive<FormRules>({
  menuName: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 15, message: '菜单名称为2-15个字段', trigger: 'blur' },
  ],
  url: [
    {
      required: true,
      message: 'Url地址不能为空',
      trigger: 'change',
    },
  ],

})
//添加菜单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) 
    {
        ruleForm.pId=ruleForm.pId[ruleForm.pId.length-1]
      http.post("api/Menu/AddMenu",ruleForm).then(res=>
      {
        if(res.data.code==200)
        {
            ElMessage.success(res.data.message)
            seach()
            dialogVisible.value=false
            ruleForm.menuName=''
            ruleForm.url=''
            ruleForm.pId=''
        }
        else
        {
            ElMessage.error(res.data.message)
        }
      })
    } 
    else 
    {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//级联
const props1 = {
  checkStrictly: true,
   value: 'id',
   label: 'menuName',
   children: 'children'
}
const options = ref([])
const getOptions = () => 
{
    axios.get("api/Menu/GetShow").then(res=>
    {
        options.value = res.data.data
    }) 
}
onMounted(()=>
{
    getOptions()
})


const Update=async(row:any)=>
{
  UpdatedialogVisible.value=true
  ruleForm.menuName=row.menuName
  ruleForm.id=row.id
  ruleForm.pId=row.pId
  ruleForm.url=row.url
}
//修改
const Edit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) 
    {
        ruleForm.pId=ruleForm.pId[ruleForm.pId.length-1]
      http.put("api/Menu/UpdateMenu",ruleForm).then(res=>
      {
        if(res.data.code==200)
        {
            ElMessage.success(res.data.message)
            seach()
            UpdatedialogVisible.value=false
            ruleForm.menuName=''
            ruleForm.url=''
            ruleForm.pId=''
        }
        else
        {
            ElMessage.error(res.data.message)
        }
      })
    } 
    else 
    {
      console.log('error submit!', fields)
    }
  })
}

const Hand=(id:any)=>
{
    return tableData.value.some((menu:any)=>menu.pId===id)
}
//删除
const handleClick = (id:any,menuName:any) =>
{
    ElMessageBox.confirm(
    '确定要删除当前菜单['+menuName+']吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => 
    {
       if(Hand(id))
       {
             ElMessageBox.confirm(
             '确认要删除吗?',
                '警告',
                {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                }
            )
            .then(() =>
            {
                     http.delete("api/Menu/DeleteMenu",{params:{id:id}}).then(res=>
                    {
                            if(res.data.code==200)
                            {
                                ElMessage.success(res.data.message)
                                seach()
                            }
                            else
                            {
                                ElMessage.error(res.data.message)
                            }
                            
                    })
            })
            .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
            })
       }
       else
       {
         http.delete("api/Menu/DeleteMenu",{params:{id:id}}).then(res=>
                    {
                            if(res.data.code==200)
                            {
                                ElMessage.success(res.data.message)
                                seach()
                            }
                            else
                            {
                                ElMessage.error(res.data.message)
                            }
                            
                    })
       }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>
